<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding:0; margin:0;}
        .all{
           width:200px; height:200px;
           border: solid 2px #000; 
           text-align: center;
           margin: 0 auto;
        }
        /* .all p{
            display: inline-block; vertical-align: middle;
        }         */
         

        img{
            /* display: inline-block; */
             vertical-align: center;
        }
        /* 垂直居中 vertical-align: top middle bottom

            1,把当前标签转成inline-block,添加vertical-align:middle
            2,必须要添加一个同级标签, 转成inline-block,添加vertical-align:middle,height：100%;
            height:100%表示的意思是父元素有多高，子元素就有多高


            给父元素添加line-height，给当前标签转成inline-block;添加vertical-align:middle;

        */
    </style>
</head>
<body>
  <div class="all">
    <!-- <p>用的少<br />不等于没用</p><span></span> -->
    <img src="images/luo.jpg" alt="">
  </div>  
</body>
</html>